<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 160px;
				height: 300px;
				margin: 50px auto;
				background: whitesmoke;
				position: relative;
			}
			#box div{
				width: 60px;
				height: 40px;
				border: 1px solid black;
				margin-right: 50px;
				margin-top: 40px;
				float: left;
				cursor: pointer;
			}
			#box span{
				display: block;
				float: left;
				margin-top: 40px;
			}
			#box .color{
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//抓到所有的span标签
				var shuxing = document.getElementsByClassName('attr');
				//因为有多个标签要加事件 所以用了for
				for (var i=0;i<shuxing.length;i++) {
					shuxing[i].onclick = function(){		
						//this代表点击的那个
						this.setAttribute('class','color');
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<!--在前台人员给后台人员网页的时候 布置类似的只需要一个
			因为后台人员会进行数据的遍历 会从数据库取数据到前台
			页面 那么就会出现多个了-->
			<span>颜色：</span><div class="attr">深空灰</div>
			<span>版本：</span><div class="attr">64G</div>
			<span>库存：</span><div class="attr">2000</div>
		</div>
	</body>
</html>
